import React, { Component } from "react"
import Taro from "@tarojs/taro"
import { Swiper, SwiperItem, Image, Text, Navigator, ScrollView, View } from "@tarojs/components"
import clsx from "clsx"
import GpContainer from "@/components/GpContainer"
import GpBlockTitle from "@/components/GpBlockTitle"
import GpNewsItem from "@/components/GpNewsItem"
import GpMustReadItem from "@/components/GpMustReadItem"
import GpJumpNavs from "@/components/GpJumpNavs"
import GpCurrentPort from "@/components/GpCurrentPort"
import GpTabbar from "@/components/GpTabbar"
import { pageMapper } from "@/constants/pageMap"
import { commonUrls, makePagePath } from "@/utils/router"
import { setPageMeta } from "@/utils/common"
import { getNewsData } from "@/apis/index"
import styles from "./index.module.scss"

const ports = [{ text: "艺考资讯" }]
type IState = {
  /** 艺考必读 */
  mustReads: any[]
  /** 艺考动态 */
  dynamics: any[]
  /** 艺考问答 */
  questions: any[]
  /** 培训指南 */
  guides: any[]
  /** 艺考政策 */
  policys: any[]
  /** 模块 */
  modules: any[]
}
export default class Index extends Component<unknown, IState> {
  constructor(props) {
    super(props)
    this.state = {
      mustReads: [],
      dynamics: [],
      questions: [],
      guides: [],
      policys: [],
      modules: []
    }
  }
  onLoad() {
    this.getNewsData()
  }
  onShareAppMessage() {}
  componentDidShow() {
    this.setPageInfo()
  }
  setPageInfo = () => {
    setPageMeta({
      keywords: `艺考最新政策，艺考最新动态`,
      title: `高考艺考政策与动态-择艺宝`,
      description: `高考艺考政策与动态-择艺宝`
    })
  }
  getNewsData = () => {
    Taro.showLoading()
    getNewsData()
      .then(res => {
        if (res.data.success) {
          const retData = res.data.data
          const _dynamics = retData.dynamics || []
          _dynamics.forEach(l => {
            // @ts-ignore
            l.url = makePagePath(pageMapper.newsDetail, { id: l.id })
          })
          const _questions = retData.questions || []
          _questions.forEach(l => {
            // @ts-ignore
            l.url = makePagePath(pageMapper.qaDetail, { id: l.id })
          })
          const _guides = retData.guides || []
          _guides.forEach(l => {
            // @ts-ignore
            l.url = makePagePath(pageMapper.newsDetail, { id: l.id })
          })
          const _policys = retData.policys || []
          _policys.forEach(l => {
            // @ts-ignore
            l.url = makePagePath(pageMapper.newsDetail, { id: l.id })
          })
          this.setState({
            mustReads: retData.mustReads || [],
            dynamics: _dynamics,
            questions: _questions,
            guides: _guides,
            policys: _policys,
            modules: retData.modules || []
          })
        }
      })
      .finally(() => {
        Taro.hideLoading()
      })
  }
  /** 轮播 */
  renderSwiper = () => {
    return (
      <View>
        <Swiper
          className="h-248px"
          indicatorColor="rgba(255, 255, 255, 0.5)"
          indicatorActiveColor="#FFFFFF"
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <Navigator
              url={commonUrls.examGuide}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_1.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.institution}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
              openType="switchTab"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_2.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <View
              onClick={this.getNewsData}
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_3.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </View>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
  /** 导航 */
  renderNavLinks = () => {
    const { modules } = this.state
    if (!modules || modules.length === 0) return null
    return (
      <View className="mt-48px">
        <ScrollView scrollX className="box-border w-750px">
          <View className="flex flex-row justify-start box-border">
            {modules.map(l => (
              <View className={clsx("flex-none", styles["module-item"])} key={l.id}>
                <Navigator
                  hoverClass="none"
                  url={"/" + pageMapper.moduleDetail + "?id=" + l.id}
                  className="flex flex-col items-center justify-center"
                >
                  <Image src={l.icon} className="w-84px h-84px box-border" mode="aspectFit" />
                  <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">
                    {l.name}
                  </Text>
                </Navigator>
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
    )
  }
  // /** 导航 */
  // renderNavLinks = () => {
  //   return (
  //     <View className="pl-64px pr-56px mt-30px">
  //       <Grid columns={4} bordered={false}>
  //         <Grid.Item>
  //           <Navigator
  //             url={commonUrls.examDynamic}
  //             className="flex flex-col items-center justify-center"
  //           >
  //             <Image
  //               src="/images/news/ykdt.jpg"
  //               className="w-84px h-84px box-border"
  //               mode="aspectFit"
  //             />
  //             <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">艺考动态</Text>
  //           </Navigator>
  //         </Grid.Item>
  //         <Grid.Item>
  //           <Navigator
  //             url={commonUrls.examQA}
  //             className="flex flex-col items-center justify-center"
  //           >
  //             <Image
  //               src="/images/news/ykwd.jpg"
  //               className="w-84px h-84px box-border"
  //               mode="aspectFit"
  //             />
  //             <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">艺考问答</Text>
  //           </Navigator>
  //         </Grid.Item>
  //         <Grid.Item>
  //           <Navigator
  //             url={commonUrls.trainGuide}
  //             className="flex flex-col items-center justify-center"
  //           >
  //             <Image
  //               src="/images/news/pxzn.jpg"
  //               className="w-84px h-84px box-border"
  //               mode="aspectFit"
  //             />
  //             <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">培训指南</Text>
  //           </Navigator>
  //         </Grid.Item>
  //         <Grid.Item>
  //           <Navigator
  //             url={commonUrls.examStrategy}
  //             className="flex flex-col items-center justify-center"
  //           >
  //             <Image
  //               src="/images/news/ykzc.jpg"
  //               className="w-84px h-84px box-border"
  //               mode="aspectFit"
  //             />
  //             <Text className="yahei font-normal text-26px text-hex-2c2c35 mt-12px">艺考政策</Text>
  //           </Navigator>
  //         </Grid.Item>
  //       </Grid>
  //     </View>
  //   )
  // }
  /** 艺考必读 */
  renderMustRead = () => {
    const { mustReads } = this.state
    const len = mustReads.length
    if (len <= 0) return null
    return (
      <View className="pt-63px">
        <View className="pb-47px px-30px">
          <GpBlockTitle title="艺考必读" />
        </View>
        <View className="px-30px flex flex-col">
          {mustReads.map((l, index) => (
            <GpMustReadItem
              key={index}
              mustReadItem={l}
              className={clsx({
                "mb-48px": index !== len - 1
              })}
            />
          ))}
        </View>
      </View>
    )
  }
  /** 艺考动态 */
  renderDynamics = () => {
    const { dynamics } = this.state
    const len = dynamics.length
    if (len <= 0) return null
    return (
      <View className="pt-88px">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考动态" showArrow navigatorLink={commonUrls.examDynamic} />
        </View>
        <View className="px-30px pb-33px flex flex-col">
          {dynamics.map((l, index) => (
            <GpNewsItem
              key={index}
              text={l.title}
              time={l.date as string}
              navigationLink={l.url}
              className={clsx({
                "mb-28px": index !== len - 1
              })}
            />
          ))}
        </View>
      </View>
    )
  }
  /** 艺考问答 */
  renderQA = () => {
    const { questions } = this.state
    const len = questions.length
    if (len <= 0) return null
    return (
      <View className="pt-88px">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考问答" showArrow navigatorLink={commonUrls.examQA} />
        </View>
        <View className="px-30px pb-33px flex flex-col">
          {questions.map((l, index) => (
            <GpNewsItem
              key={index}
              text={l.title}
              time={l.date as string}
              navigationLink={l.url}
              className={clsx({
                "mb-28px": index !== len - 1
              })}
            />
          ))}
        </View>
      </View>
    )
  }
  /** 培训指南 */
  renderGuide = () => {
    const { guides } = this.state
    const len = guides.length
    if (len <= 0) return null
    return (
      <View className="pt-88px">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="培训指南" showArrow navigatorLink={commonUrls.trainGuide} />
        </View>
        <View className="px-30px pb-33px flex flex-col">
          {guides.map((l, index) => (
            <GpNewsItem
              key={index}
              text={l.title}
              time={l.date as string}
              navigationLink={l.url}
              className={clsx({
                "mb-28px": index !== len - 1
              })}
            />
          ))}
        </View>
      </View>
    )
  }
  /**  艺考政策*/
  renderStrategy = () => {
    const { policys } = this.state
    const len = policys.length
    if (len <= 0) return null
    return (
      <View className="pt-88px">
        <View className="pb-34px px-30px">
          <GpBlockTitle title="艺考政策" showArrow navigatorLink={commonUrls.examStrategy} />
        </View>
        <View className="px-30px pb-33px flex flex-col">
          {policys.map((l, index) => (
            <GpNewsItem
              key={index}
              text={l.title}
              time={l.date as string}
              navigationLink={l.url as string}
              className={clsx({
                "mb-28px": index !== len - 1
              })}
            />
          ))}
        </View>
      </View>
    )
  }
  /**  艺考政策*/
  renderModule = (module: any) => {
    if (!module) return null
    const navigatorLink = makePagePath(pageMapper.moduleDetail, { id: module.id })
    return (
      <View className="pt-88px" key={module.id}>
        <View className="pb-34px px-30px">
          <GpBlockTitle title={module.name} showArrow navigatorLink={navigatorLink} />
        </View>
        {module.list && module.list.length > 0 ? (
          <View className="px-30px pb-33px flex flex-col">
            {module.list.map((l, index) => (
              <GpNewsItem
                key={index}
                text={l.title}
                time={l.date as string}
                navigationLink={"/" + pageMapper.newsDetail + "?id=" + l.id}
                className={clsx({
                  "mb-28px": index !== module.list.length - 1
                })}
              />
            ))}
          </View>
        ) : null}
      </View>
    )
  }
  /** 快捷导航 */
  renderJumpNavs = () => {
    return (
      <View className="mt-20px">
        <GpJumpNavs />
      </View>
    )
  }
  render() {
    const { modules } = this.state
    return (
      <GpContainer className="index">
        <View className="bg-hex-fff pt-20px">
          {/* 轮播 */}
          {this.renderSwiper()}
          {/* 导航 */}
          {this.renderNavLinks()}
          {/* 艺考必读 */}
          {this.renderMustRead()}
          {/* 艺考动态 */}
          {/* {this.renderDynamics()} */}
          {/* 艺考问答 */}
          {/* {this.renderQA()} */}
          {/* 培训指南 */}
          {/* {this.renderGuide()} */}
          {/* 艺考政策 */}
          {/* {this.renderStrategy()} */}
          {/* 模块渲染 */}
          {modules && modules.length > 0 ? modules.map(l => this.renderModule(l)) : null}
        </View>
        {/* 快捷导航 */}
        {this.renderJumpNavs()}
        {/* 当前位置 */}
        <GpCurrentPort ports={ports} />
        {/* 底部导航 */}
        <GpTabbar type={16} />
      </GpContainer>
    )
  }
}
